<template>
    <div class="app">
        <div class="userInfo">
         <div class="on">
            <div class="icon">
                <el-avatar  :size="70" :src="iconUrl">
                           <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
                <span class="uname">{{userName}}</span>
                <el-button v-if="focas=='关注'" size="small" class="follow" @click="follow(uId)">{{focas}}</el-button>
                <el-button v-if="focas=='已关注'" size="small" class="follow">{{focas}}</el-button>
            </div>
         </div>
        <div class="zhong">
            <div class="yuanchuang">
                <div class="t1">
                    <span style="font-weight: bold;">原创</span>
                    <span style="font-weight: bold;position: relative;margin-left:80px">粉丝</span>
                </div>

                <div class="tf1">
                    <span>{{paper}}</span>
                    <span style="position: relative;margin-left:100px">{{fans}}</span>
                </div>
            </div>
        </div>
        <div class="under">
            <div class="im">
                <img class="im" :src="bar">
            </div>
        </div>
        </div>
       <div class="page">
        <div class="title">
            <h2>{{blogTitle}}</h2>
            <div class="miaoshu">
                <span class="font2">原创</span>
                <span class="el-icon-timer createtime">{{createTime}}</span>
                <span class="el-icon-user usericon">{{userName}}</span>
                <span class="el-icon-reading view">阅读数 : {{blogView}}</span>
                <span class=" category"><i class="el-icon-loading"></i>{{category}}</span>
            </div>
        </div>
        <div v-if="editType=='fwb'" v-html="blogContent" class="context">
        </div>
        <div v-if="editType=='markdown'" v-html="compiledMarkdown" class="context">
        </div>
        <div class="underfloor" v-if="enableComment==0">
            <span class="commenttitle">评论:</span>
            <div class="commentnavbar">
            <el-input
            class="commentinput"
            type="textarea"
            :placeholder='replywho'
            v-model="comment"
            maxlength="200"
            show-word-limit
            >
            </el-input>
            <el-button type="small" @click="commit">提交</el-button>
            </div>
            <div class="commentlists">
                 <div v-for="item in commentpool" class="commentlist">
                     <div class="commentIcon">
                        <el-avatar  :size="30" :src="item.IconUrl">
                            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                        </el-avatar>
                        <span class="commentName">{{item.Username}}</span>
<<<<<<< HEAD
                     </div>  
                     <div v-if="item.ToId==0">
                     <span class="comment">{{item.Content}}</span> 
                     <div class="reply"><el-button type="text" @click="reply(item.FromId,item.Username)">回复</el-button></div>
                     </div>  
                     <div v-else-if="item.ToId!=0" >
                          <span class="comment">回复于{{item.Toname}}:{{item.Content}}</span> 
                     <div class="reply"><el-button type="text" @click="reply(item.FromId,item.Username)">回复</el-button></div>
                     </div>           
=======
                     </div>
                     <span class="comment">{{item.Content}}</span>
>>>>>>> origin/master
                 </div>
            </div>
       </div>
       <div class="underfloor" v-if="enableComment==1">
           <center><h2>该文章禁止评论</h2></center>
       </div>
        </div>
    </div>
</template>


<script>
import {apiurl} from "../../service/api.js";
let marked = require('marked');
let hljs = require('highlight.js');
import 'highlight.js/styles/default.css';
marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code, lang) {
          if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(lang, code, true).value;
          } else {
            return hljs.highlightAuto(code).value;
          }
      }
  });



export default {
    created(){
        document.querySelector("body").setAttribute("style","background-color: #79e7eb")
        var lurl = location.href  //当前路由
        //获取博客ID
        var blogid = this.$route.params.blogid;
        var that = this
        that.$axios.get({
            url : apiurl.readblog+blogid
        }).then(res=>{
            that.blogId = res.data.data.BlogId
            that.blogTitle = res.data.data.BlogTitle
            that.blogContent = res.data.data.BlogContent
            that.blogView = res.data.data.BlogView
            that.category = res.data.data.Category
            that.createTime = res.data.data.CreateTime
            that.editType = res.data.data.EditType
            that.enableComment = res.data.data.EnableComment
            that.isDeleted = res.data.data.IsDeleted
            that.uId = res.data.data.UId
            that.userName = res.data.data.UserName
            that.iconUrl =res.data.data.IconUrl
            that.fans = res.data.data.Fans
            that.paper = res.data.data.Paper
        })
       that.getComment(blogid)
    },
    computed: {
        compiledMarkdown() {

        let detail = this.blogContent;
        return marked(detail || '', {
          sanitize: true
        });
      }
    },
    data(){
        return{
            blogId : '', //博客id
            blogTitle : '',//博客标题
            blogContent : '', //博客内容
            blogView  : '',//博客阅读数量
            category  : '',//文章分类
            createTime : '', //创作时间
            editType  : '' , //编辑类型
            enableComment : '', //评论状态
            isDeleted : '',   //删除状态
            uId : '',   //用户id
            userName : '', //用户名
            iconUrl : '',
            fans : '',
            paper : '',
            bar : require('../../assets/download.png'),
            focas : '关注',

            comment: '', //评论
            toId : null,
            commentpool :[] ,//评论数据列表
            replywho : '评论作者',
        }
    },methods :{
        follow(u){
            var that =this
            var psd = {
                Uuid : u.toString()
            }
            that.$axios.post({
                url:apiurl.follow,
                data : psd
            }).then(res=>{
                that.focas = '已关注'
            })
        },
        commit(){
            var that = this
            var psd = {
                BlogId : that.blogId,
                Comment : that.comment,
                ToId : that.toId
            }
            that.$axios.post({
                url : apiurl.sendcomment,
                data : psd
            }).then(res=>{
                if(res.data.code==200){
                    alert("评论成功")
                    that.comment = ""
                    that.commentpool.splice(0,that.commentpool.length)
                    that.getComment(that.blogId)
                }

            })
        },
        getComment(bid){
            var that = this
             var psd = {
            blogId : parseInt(bid)
            }
            that.$axios.post({
                url : apiurl.showcomment,
                data : psd
            }).then(res=>{
                if(res.data.code==200){
                    for(var i=0;i<res.data.data.length;i++){
                        that.commentpool.push(res.data.data[i])
                    }
                }
            })
        },
        reply(localId,localname){
            var that = this
            that.replywho = "回复:"+localname
            that.toId = localId
            that.comment = ""
        }
    }
}
</script>

<style scoped>
    .userInfo{
        background: #fff;
        height: 400px;
        width: 350px;
        position: absolute;
        left : 30px;
        top:100px;
        box-shadow: 10px 10px 5px #888;
        border:1px solid rgba(236, 231, 231, 0.979);
    }
    .on{
        width: 100%;
        height: 100px;
        border:1px solid rgba(236, 231, 231, 0.979);
    }
    .icon{
        position: relative;
        margin-top: 20px;
        margin-left: 50px;
    }
    .uname{
        font-weight: bold;
        font-family: 'Times New Roman', Times, serif;
        font-size: 30px;
        position: relative;
        margin-left: 30px;
    }

    .follow{
        position: absolute;
        left:230px;
        background: rgb(94, 224, 181);
    }
    .zhong{
        width: 100%;
        height: 100px;
        border:1px solid rgba(236, 231, 231, 0.979);
    }

    .t1{
        position: relative;
        margin-left: 50px;
        margin-top: 20px;
    }
    .tf1{
        position: relative;
        margin-left: 55px;
        margin-top: 10px;
    }
    .im{
        position: relative;
        margin-left: 40px;
        margin-top: 30px;
        width: 200px;
        height: 100px;
    }
    .page{
        background: #ffffff;
        width: 1050px;
        position: absolute;
        top:100px;
        left:400px;
        box-shadow: 10px 10px 5px #888;
        border:1px solid rgba(236, 231, 231, 0.979);
    }
    .title{
        position: relative;
        left: 50px;
        width: 90%;
        height: 100px;
        border-bottom: 1px solid rgba(228, 217, 217, 0.972);
    }
    .underfloor{
        width: 100%;
        margin-top: 20px;
        position: absolute;
        background: #fff;
        height: 500px;
    }
    .commentinput{
        position: relative;
        width: 600px;
        margin-top: 10px;
       margin-left: 20%
    }
    .commenttitle{
        font-weight: bold;
        color:red;
        position: relative;
        margin-left: 20%
    }
    .commentlists{
        overflow: scroll;
        overflow-x:hidden;
        width: 80%;
        height: 400px;
        position: relative;
        margin-left: 10%;
        margin-top: 10px;
    }
    .commentlist{
        position: relative;
        margin-top: 10px;
        border-bottom: 1px dashed gainsboro
    }

    .commentName{
        position: relative;
        /* bottom: 50px; */
        font-size: 10px;
        font-weight: bold;
    }
    .comment{
        position: relative;
        bottom: 20px;
        margin-left: 15%;
    }
    .reply{
        position: relative;
        float: right;
        bottom: 5px;
    }
    .miaoshu{
        width: 100%;
    }
    .font2{
        font-family: 'Courier New', Courier, monospace;
        font-size: 15px;
        border: 1px solid rgba(212, 208, 208, 0.966);
    }
    .createtime{
        position: relative;
        margin-left: 50px;
        font-family: 'Courier New', Courier, monospace;
    }
    .usericon{
        position: relative;
        margin-left: 50px;
        font-family: 'Courier New', Courier, monospace;
    }
    .view{
        position: relative;
        margin-left: 50px;
        font-family: 'Courier New', Courier, monospace;
    }
    .category{
        position: relative;
        margin-left: 300px;
        border: 1px solid rgba(212, 208, 208, 0.966);
        background: yellowgreen;
    }
    .context{
        position: relative;
        margin-left: 50px;
        margin-right:50px;
    }
<<<<<<< HEAD
    ::-webkit-scrollbar-track-piece{ 
    background-color:#f8f8f8;
    }
    ::-webkit-scrollbar {
    width:5px;
    height:3px;
    }
    ::-webkit-scrollbar-thumb {
    background-color:gray;
    background-clip:padding-box;
    min-height:28px;
    }
    ::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
    }
 
    
</style>
=======

</style>
>>>>>>> origin/master
